<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../Css/style.css"/>
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>


    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    <script>
        $(function () {
            $('#backid').click(function () {
                window.location.href = "index.html";
            });
        });
    </script>
</head>
<body>
<form id="myForm" action="index.html" method="post" class="definewidth m20">
    <!--<input type="hidden" name="id" value="{$user.id}" />-->
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">资源名称</td>
            <td><input type="text" id="menuName" name="menuName"/></td>
        </tr>
        <tr>
            <td class="tableleft">url</td>
            <td><input type="text" id="menuUrl" name="menuUrl"/></td>
        </tr>
        <tr>
            <td class="tableleft">是否启用</td>
            <td>
                <input type="radio" name="menuState" value="0" checked/> 启用
                <input type="radio" name="menuState" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button id="addMenu" type="button" class="btn btn-primary" type="button">添加</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script src="/layer/layer.js"></script>
<script>
    $(function () {

        $("#addMenu").click(function () {
            // alert($("#myForm").serialize());
            let menuName = $("input[name='menuName']").val();
            let menuUrl = $("input[name='menuUrl']").val();
            if (validate(menuName, menuUrl)) {
                $.ajax({
                    type: "GET",
                    url: "/menu",
                    data: "menuName="+menuName,
                    dataType: "json",
                    success: function (vo) {
                        if (vo.code == 200) {
                           addMenu();
                        } else {
                            layer.msg("资源名称重复！");
                        }
                    }
                });
            }
        });
        $("#backid").click(function () {
            window.location.href = "index.html";
        });
    });

    function addMenu() {
        $.ajax({
            type: "POST",
            url: "/menu/",
            data: $("#myForm").serialize(),
            dataType: "json",
            success: function (vo) {
                if (vo.code == 200) {
                    layer.msg("添加成功");
                    $("input").val("");
                    $("input[name='menuState']:eq(0)").prop("checked","true");
                    //window.location.href = "index.html";
                } else {
                    layer.msg(vo.msg);
                }
            }
        });
    }

    function validate(menuName, menuUrl) {
        if (menuName == null || menuName.length == 0) {
            layer.msg("资源名称不能为空");
            return false;
        }
        if (menuUrl == null || menuUrl.length == 0) {
            layer.msg("资源路径不能为空");
            return false;
        }
        return true;
    }
</script>